<template>
  <div class="app-container" style="width: 100%">
    <SearchForm
      class="selectGroup"
      :search-form="searchFormById"
      :search-data="searchDataById"
      :searchHandle="searchHandle"
    />
    <Table
      :loading="tabloading"
      isHidden
      :tableData="tableData"
      :rowHeader="rowHeader"
      :tableOption="tableOption"
      :page-obj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      element-loading-text="拼命加载中..."
      @handleButton="handleButton"
    />
    <VersionDialog
      :dialogVisible.sync="dialogVisible"
      :dialogData="dialogData"
      @close="dialogVisible = false"
      :dialogType="dialogType"
      ref="dialogRef"
      @addTsk="addTsk"
    />
    <el-dialog
      :visible="updateDialog"
      :title="dialogTitle"
      width="75%"
      height="70%"
      :before-close="updateDialogs"
      :close-on-click-modal="false"
      @close="dialogVisible = false"
    >
      <SearchForm
        ref="dialogSearchForm"
        :rules="dialogSearchrules"
        :inline="true"
        :label-width="'150px'"
        :search-form="searchForm"
        :search-data="searchData"
        :search-handle="dialogHandle"
        no-border="border:none"
        class="detialSearch"
      />
    </el-dialog>
  </div>
</template>
<script>
import SearchForm from "@/components/searchForm/index.vue";
import Table from "@/components/Table/baseTable";
import VersionDialog from "./versionRecordDialog.vue";
import { Task, QueryTask } from "@/api/task.js";
import { UserQuery } from "@/api/mange.js";

import {
  queryVersions,
  DelVersions,
  updateVcontent,
  updateVcontentTime,
} from "@/api/mange.js";

export default {
  name: "versionRecord",
  components: {
    SearchForm,
    Table,
    VersionDialog,
  },
  data() {
    let _this = this;
    return {
      data: [],
      versionsNum: "",
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },
      queryProjectId: "",
      dialogData: {},
      projectId: "",
      dialogTitle: "更新意见",
      dialogSearchrules: {},
      updateDialog: false,
      dialogVisible: false,
      dialogType: "new",
      tabloading: false,
      tableData: [],
      tableOption: {
        label: "操作",
        width: "440px",
        options: [
          {
            persstion: "",
            methods: "updateEdit",
            label: "更新意见",
            type: "primary",
          },
          {
            persstion: "",
            methods: "edit",
            label: "编辑",
            type: "primary",
          },
          {
            persstion: "",
            methods: "updata",
            type: "primary",
            disabledRender: (row) => {
              if (row.updateState == 1) {
                return true;
              } else {
                return false;
              }
            },
            labelRender: (row) => {
              if (row.updateState == 0) {
                return "更新";
              } else if (row.updateState == 1) {
                return "已更新";
              }
            },
          },
          {
            persstion: "",
            label: "删除",
            methods: "delete",
            type: "danger",
          },
        ],
      },
      rowHeader: [
        {
          label: "项目名称",
          prop: "projectName",
        },
        {
          label: "版本号",
          prop: "versionsNum",
        },
        {
          label: "预计更新时间",
          prop: "expectUpdateTime",
        },
        {
          label: "更新时间",
          prop: "updateTime",
        },
        {
          label: "更新内容",
          prop: "updateContent",
        },
        {
          label: "更新人",
          prop: "updateName",
        },
      ],
      searchFormById: [
        {
          type: "Select",
          label: "项目名称:",
          options: [],
          prop: "projectName",
          clearable: true,
          clear: () => {},
          change: (val) => {
            this.projectId = val;
          },
        },
      ],
      searchDataById: {
        projectName: "",
      },
      searchHandle: [
        {
          type: "primary",
          label: "查询",
          handle: (item) => {
            this.addTsk();
          },
        },
        {
          type: "primary",
          label: "添加",
          persstion: "",
          handle: () => {
            this.dialogVisible = true;
            this.dialogType = "new";
            this.$refs.dialogRef.searchData = {
              relationProjectId: "",
              versionsNum: "",
              userId: "",
              expectUpdateTime: "",
            };
          },
        },
      ],
      searchData: {
        searchByMange: "",
      },
      searchForm: [
        {
          type: "Select",
          label: "负责人:",
          options: [],
          prop: "searchByMange",
          clearable: true,
          clear: () => {},
          change: (val) => {
            this.queryProfect();
          },
        },
        {
          type: "Table",
          class: "tableClass",
          InputWidth: "width:100%",
          pageObj: {
            total: 0,
            size: 10000,
            sizes: [10, 30, 50, 100],
            currentPage: 1,
          },
          tableOption: {
            label: "操作",
            width: "200px",
            options: [
              {
                type: "success",
                icon: "el-icon-circle-check",
                methods: "editState",
              },
              {
                type: "danger",
                icon: "el-icon-circle-close",
                methods: "yanshou",
              },
            ],
          },
          tableData: [],
          rowHeader: [
            {
              label: "排序",
              width: "25px",
              prop: "title",
              render: (params, index) => {
                return (
                  index +
                  1 +
                  (_this.searchForm[1].pageObj.currentPage - 1) *
                    _this.searchForm[1].pageObj.size
                );
              },
            },
            {
              prop: "projectName",
              label: "项目",
            },
            {
              prop: "taskTitle",
              label: "任务标题",
            },
            {
              prop: "taskResponsible",
              label: "负责人",
            },
            {
              prop: "taskTypeName",
              label: "类型",
            },
            {
              prop: "taskStateName",
              label: "状态",
            },
            {
              prop: "startTime",
              label: "创建时间",
            },
            {
              prop: "endTime",
              label: "计划时间",
            },
          ],
          handleCurrentChange: function (val) {
            _this.searchForm[1].pageObj.currentPage = val;
            _this.queryProfect();
          },
          handleSizeChange: function (val) {
            _this.searchForm[1].pageObj.currentPage = 1;
            // _this.searchForm[1].pageObj.size = val;

            _this.queryProfect();
          },
          handleButton: function (methods, data, row, index) {
            if (methods === "editState") {
              row.taskState = 4;
              row.taskStateName = "已验收";
            } else if (methods === "yanshou") {
              row.taskState = 3;
              row.taskStateName = "已完成";
            }
          },
        },
      ],
      // 更新意见
      dialogHandle: [
        {
          type: "primary",
          label: "确定",
          handle: () => {
            this.updateDialog = false;
            this.data = [];
            this.searchForm[1].tableData.map((item) => {
              if (item.taskState == 4) {
                this.data.push(item.id);
              }
            });
            updateVcontent({ ids: this.data, id: this.versionsNum }).then(
              (res) => {
                this.addTsk();
                // 更新意见之后调用接口更新所有的发版记录表格
                // queryVersions({
                //   page: this.pageObj.currentPage,
                //   limit: this.pageObj.size,
                //   relationProjectId: this.projectId,
                // }).then((res) => {
                //   res.result.records.map((item) => {
                //     item.status.map((ite) => {
                //     });
                //   });
                //   this.tableData = res.result.records;
                //   this.pageObj.total = res.result.total;
                //   this.updataState = res.result.updateState;
                // });
              }
            );
          },
        },
        {
          type: "primary",
          label: "关闭",
          handle: () => {
            this.updateDialog = false;
          },
        },
      ],
    };
  },
  mounted() {
    this.addTsk();
    this.queryTask();
    this.userQuery();
  },

  methods: {
    // 下拉显示负责人
    userQuery() {
      this.searchForm[0].options = [];
      UserQuery({}).then((res) => {
        res.result.map((item) => {
          this.searchForm[0].options.push({
            label: item.name,
            value: item.id,
          });
        });
      });
    },
    // 查询所有完成的任务
    queryProfect() {
      QueryTask({
        page: this.searchForm[1].pageObj.currentPage,
        limit: 10000,
        taskState: 3,
        taskResponsibleId: this.searchData.searchByMange,
        relationProjectId: this.queryProjectId,
      }).then((res) => {
        this.searchForm[1].tableData = res.result.records;
        this.searchForm[1].pageObj.total = res.result.total;
      });
    },
    queryTask() {
      this.searchFormById[0].options = [];
      Task({}).then((res) => {
        if (res.code == "200") {
          res.result.map((item) => {
            this.searchFormById[0].options.push({
              label: item.projectName,
              value: item.id,
            });
          });
        }
      });
    },
    updateDialogs() {
      this.updateDialog = false;
    },
    handleCurrentChange(val) {
      this.pageObj.currentPage = val;
      this.addTsk();
    },
    handleSizeChange(val) {
      this.pageObj.currentPage = 1;
      this.pageObj.size = val;
      this.addTsk();
    },
    addTsk() {
      queryVersions({
        page: this.pageObj.currentPage,
        limit: this.pageObj.size,
        relationProjectId: this.projectId,
      }).then((res) => {
        this.tableData = res.result.records;
        this.pageObj.total = res.result.total;
      });
    },
    handleButton(methods, data, row, index) {
      if (methods == "edit") {
        this.dialogVisible = true;
        this.dialogType = "edit";
        this.$refs.dialogRef.searchData = row;
      } else if (methods == "delete") {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        })
          .then(() => {
            DelVersions({ id: row.id }).then((res) => {
              this.addTsk();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (methods == "updateEdit") {
        // 弹框表格需要的项目id  和状态task
        this.queryProjectId = row.relationProjectId;
        this.queryProfect();
        this.updateDialog = true;
        this.searchData.id = row.id;
        this.versionsNum = row.id;
      } else if (methods == "updata") {
        updateVcontentTime({
          id: row.id,
        }).then((res) => {
          if (res.code == "200") {
            this.$message.success("更新成功");
            this.addTsk();
          }
        });
      }
    },
  },
};
</script>
<style lang="scss">
.app-container {
  width: 100%;
  .ueditorCont {
    width: 100%;
    .el-form-item__content {
      width: 76%;
      height: 30%;
      .el-textarea__inner {
        min-height: 120px !important;
      }
    }
  }
  .tableClass {
    width: 100%;
    .el-form-item__content {
      width: 100%;
    }
  }
  .tableWrapper {
    border: 1px solid #e5e5e5;
    width: 97%;
    margin: auto;
  }
  .detialSearch {
    .InlineBlock {
      display: flex;
      justify-content: end;
      margin-right: 8%;
    }
  }
}
</style>